import 'package:app_router_demo/providers/auth_provider.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../config/app_router.dart';

// @RoutePage()
// class LoginPage extends StatelessWidget {
//   const LoginPage({super.key});

//   @override
//   Widget build(BuildContext context) {
//     return CupertinoPageScaffold(
//       navigationBar: const CupertinoNavigationBar(middle: Text('登录')),
//       child: Center(
//         child: CupertinoButton(
//           child: const Text('登录成功'),
//           onPressed: () => context.replaceRoute(const TabRoute()),
//         ),
//       ),
//     );
//   }
// }

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    final authProvider = Provider.of<AuthProvider>(
      context,
    ); // Access the provider

    return Scaffold(
      body: Stack(
        children: [
          // Background Image/Video (placeholder)
          Positioned.fill(
            child: Image.network(
              'https://via.placeholder.com/400x800', // Replace with your actual image/video
              fit: BoxFit.cover,
            ),
          ),
          SafeArea(
            // To avoid content overlapping with system UI
            child: Padding(
              padding: const EdgeInsets.all(24.0),
              child: Column(
                mainAxisAlignment:
                    MainAxisAlignment.end, // Align content to the bottom
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  const Spacer(), // Pushes content to the bottom
                  const Text(
                    'Vidzo',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 48,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const Text(
                    'Live Chat & Real Friends',
                    textAlign: TextAlign.center,
                    style: TextStyle(color: Colors.white70, fontSize: 18),
                  ),
                  const SizedBox(height: 60), // Spacing
                  _buildLoginButton(
                    onPressed: () {
                      authProvider.signInWithApple();
                    },
                    icon: Icons.apple,
                    text: 'Sing in with Apple',
                    backgroundColor: Colors.white,
                    textColor: Colors.black,
                  ),
                  const SizedBox(height: 16),
                  _buildLoginButton(
                    onPressed: () {
                      authProvider.signInWithFacebook();
                    },
                    icon: Icons.facebook,
                    text: 'Sign in with Facebook',
                    backgroundColor: Colors.blue[700]!,
                    textColor: Colors.white,
                  ),
                  const SizedBox(height: 16),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      _buildIconButton(
                        onPressed: () {
                          authProvider.signInWithGoogle();
                        },
                        icon:
                            'assets/google_logo.png', // You'd need to add this asset
                        backgroundColor: Colors.white,
                      ),
                      const SizedBox(width: 16),
                      _buildIconButton(
                        onPressed: () {
                          authProvider.signInWithEmail();
                        },
                        icon:
                            'assets/email_icon.png', // You'd need to add this asset
                        backgroundColor: Colors.white,
                      ),
                    ],
                  ),
                  const SizedBox(height: 24),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Checkbox(
                        value: authProvider.isChecked,
                        onChanged: authProvider.toggleCheckbox,
                        activeColor: Colors.white,
                        checkColor: Colors.black,
                        side: const BorderSide(color: Colors.white),
                      ),
                      Expanded(
                        child: GestureDetector(
                          onTap: () {
                            // Handle navigation to User Service Agreement/Privacy Policy
                            print('Terms and Policy tapped');
                          },
                          child: RichText(
                            text: const TextSpan(
                              text: 'I have read and agree to the ',
                              style: TextStyle(
                                color: Colors.white70,
                                fontSize: 13,
                              ),
                              children: [
                                TextSpan(
                                  text: 'User Service Agreement',
                                  style: TextStyle(
                                    decoration: TextDecoration.underline,
                                    color: Colors.white,
                                  ),
                                ),
                                TextSpan(text: ' and '),
                                TextSpan(
                                  text: 'Privacy Policy',
                                  style: TextStyle(
                                    decoration: TextDecoration.underline,
                                    color: Colors.white,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 20), // Bottom padding
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildLoginButton({
    required VoidCallback onPressed,
    required IconData icon,
    required String text,
    required Color backgroundColor,
    required Color textColor,
  }) {
    return SizedBox(
      height: 50,
      child: ElevatedButton.icon(
        onPressed: onPressed,
        style: ElevatedButton.styleFrom(
          backgroundColor: backgroundColor,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(25),
          ),
        ),
        icon: Icon(icon, color: textColor),
        label: Text(text, style: TextStyle(color: textColor, fontSize: 16)),
      ),
    );
  }

  Widget _buildIconButton({
    required VoidCallback onPressed,
    required String icon, // For custom image assets
    required Color backgroundColor,
  }) {
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(color: backgroundColor, shape: BoxShape.circle),
      child: IconButton(
        onPressed: onPressed,
        icon: Image.asset(
          icon,
          width: 24,
          height: 24,
        ), // Use Image.asset for custom icons
      ),
    );
  }
}
